<template>
	<view class="activityDetails">
        <SRV-topbar :title="pageTitle" :isLeft="true"></SRV-topbar>
        <view class="searchInfo">
        	<view style="width: 20%;">关键词</view>
        	<view class="searchInput"><input type="text" placeholder-style="font-weight: 400;color:rgba(60,72,104,0.8)" value="" placeholder="请输入联系人姓名/电话" v-model="pageParam.userkey"/></view>
            <view class="btn" @click="searchFun()">搜索</view>
        </view>
        <view class="nav" v-if="navList.length > 1">
            <view @click.stop="getsel(index)" :class="nowLevel == index ? 'item sel' : 'item'" v-for="(item,index) in navList" :key="index">
                {{item.itemName}}
            </view>
        </view>
		<view class="showList">
			<view class="showItem" v-for="(item,index) in pageResult.list" :key="index" @click="jump('inner_detail', item.id)">
				<view class="left_item"><image :src="item.picture" mode="widthFix"></image></view>
				<view class="right_item">
					<view class="right_con" style="height: 96upx; line-height: 46rpx;font-weight: 600;">
						<text class="oneline name">{{item.title}}</text>
					</view>
					<view class="right_con">
						<text class="rate">{{item.name}}</text>
					</view>
					<view class="right_con">
						<text class="rate">{{item.mobile}}</text>
					</view>
				</view>
				<show-status :name="item.stateName" size="180" fontSize="50" boder="5"
					:color="item.state==2 ? '#cc0000' : (item.state==1 ? '#fbca3f' : (item.state==9 ? '#009900' : '#FF0000')) ">
				</show-status>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
                pageTitle: "店铺列表",
                navList: [],
                nowLevel: 0,
				pageParam: {
				    appkey: uni.getStorageSync('appkey'),
				    'access-token': uni.getStorageSync('access-token'),
				    type: '',
                    userKey: '',
				    page: 0,
				    pageSize: 10
				},
				pageResult: {
				    list: [],
				    isEmpty: false,
				    isEnd: false
				},
			}
		},
		methods: {
            getEnums() {
                serve.request({
                	url: '/member/merchant/enums',
                	data: {
                		appkey: uni.getStorageSync('appkey'),
                		'access-token': uni.getStorageSync('access-token'),
                	},
                    v: '/v3',
                }).then(res => {
                    _self.navList = res.data.typeList;
                    if(_self.navList.length == 0) {
                        uni.showToast({
                        	title: "错误的访问方式",
                        	icon: 'none',
                        	success() {
                        		setTimeout(function () {
                        			common.jump('return_one')
                        		}, 2000) 
                        	}
                        });
                        return ;
                    }
                    _self.pageTitle = _self.navList.length == 1 ? _self.navList[0].itemName : "店铺列表";
                    _self.pageParam.type = _self.navList[0].itemType; 
					_self.pageParam.page = 0;
					_self.pageResult.list = [];
					_self.getList();
				});
            },
            searchFun() {
                _self.pageParam.page=0;
                _self.pageResult.list=[];
                _self.getList();
            },
            getsel(index) {
                if(Number(index) == Number(this.nowLevel)) {
                    return ;
                }
                this.nowLevel = index;
                _self.pageParam.type = _self.navList[index].itemType;
                _self.pageParam.page = 0;
                _self.pageResult.list = [];
                _self.getList();
            },
			getList() {
				serve.request({
					url: '/member/merchant/list',
					data: _self.pageParam,
                    v: '/v3',
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title: "错误的访问方式",
							icon: 'none',
							success() {
								setTimeout(function () {
									common.jump('return_one')
								}, 2000) 
							}
						});
						return ;
					}
					if (res.data && res.data.length > 0) {
					    _self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0;
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
            _self.getEnums();
		},
        onPullDownRefresh() {
        	_self.pageParam.page = 0;
        	_self.pageResult.list = [];
        	_self.getList();
        },
        onReachBottom() {
            if (_self.pageResult.isEnd || _self.pageResult.isEmpty) {
                return
            }
            _self.loadList();
        }
	}
</script>

<style scoped lang="scss">
	.activityDetails {
		padding-bottom: 100upx;
        
        .searchInfo {
            padding: 10rpx 2%;
            display: flex;
            align-items: center;
            .searchInput {
                border: 1px solid #ccc;
                width: 60%;
                padding: 5rpx 0 5rpx 20rpx;
                border-radius: 20rpx;
            }
            .btn {
                width: 20%;
                text-align: center;
                border: 1rpx solid #ffd900;
                background-color: #ffd900;
                margin-left: 20rpx;
                border-radius: 20rpx;
            }
        }
        .nav {
        	box-sizing: border-box;
        	width: 100%;
        	display: flex;
        	justify-content: space-between;
        	padding: 40upx;
        	border-top: 8upx #b1b1b3 solid;
        	border-bottom: 8upx #b1b1b3 solid;
        	.item {
        		position: relative;
        		height: 28upx;
        		line-height: 28upx;
        		width: 50%;
        		text-align: center;
        		opacity: 0.5;
        		font-size: 36upx;
        		border-right: 1upx rgba(60, 72, 104, 0.2) solid;
        	}
            
            .sel {
                font-weight: bold !important;
                opacity: 1 !important;
            }
        }
		.showList{
			.showItem{
				display: flex;
				box-sizing: border-box;
				align-items: flex-start;
				padding: 20rpx;
				border-bottom: 1px solid #ebebeb;
				.left_item {						
					margin-right: 15rpx;
					image {
						width:180rpx;
						height:180rpx;
					}
				}
				
				.right_item {
					flex: 1;
					.right_con{
						// display: flex;
						// align-items: center;
						// position: relative;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						line-clamp: 3;
						-webkit-box-orient: vertical;
						white-space:unset;
						.oneline{
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							white-space:unset;
						}
			            .state{
							
			                padding: 5rpx 8rpx;
			                text-align: center;
			                color: #FFFFFF;
			                font-size: 32rpx;
			                border-radius:2rpx;
			                margin-right: 10rpx;
			            }
						.name{
							display: inline;
							max-width: 300rpx;
							font-size: 34rpx;
						}
						.rate{
							display: inline;
							// color: #FFBC00;
							font-size: 30rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
